<script setup lang="ts">
const router = useRouter();
const goAssistingDecisionMaking = () => {
  router.push('/assistantDecision');
};
</script>

<template>
  <div class="button-box">
    <div class="analyse-btn">监测预警</div>
    <div class="assist-btn" @click="goAssistingDecisionMaking">辅助决策</div>
  </div>
</template>

<style scoped lang="scss">
.button-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  .assist-btn,
  .analyse-btn {
    z-index: 99;
    width: 8.0363rem;
    height: 2.3188rem;
    background-size: 100% 100%;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    margin: 0 2.5rem;
    text-align: center;
    line-height: 2.3188rem;
  }

  .analyse-btn {
    cursor: pointer;
    background-image: url(@/assets/largescreen/yellow-btn.png);
  }

  .assist-btn {
    cursor: pointer;
    background-image: url(@/assets/largescreen/blue-btn.png);
  }
}
</style>
